<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>验证手机号</title>
    <meta charset="UTF-8">
    <title>验证手机号</title>
    <meta name="keywords" content="验证手机号"/>
    <meta name="description" content="验证手机号"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/publicOfuser.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/combtn.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/verifyphone.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
</head>
<body>

<div class="main verifyphone bgfff">

    <div class="main_con c323232">

        <div class="header">
        </div>

        <div class="ftc mt60">

            <p>
                <span class="ft15" th:if="${map!=null}" th:text="${map.user.name}"></span>
            </p>

            <p class="mt10">
                <p class="phone"  th:if="${map!=null }" th:text="${map.user1.phone}"></p>
                <span class="ft12 c969696">(用户号绑定的手机号)</span>
            </p>

        </div>


        <div class="mt55 ml15 mr15">

            <ul>

                <li>
                    <div class="clearfix mt20 input_border_bottom_normal">
                        <img class="ml15 fl" src="/shoppingApi/images/verifycode.png" style="width: 20px;height: 23px;">
                        <a href="#" id="getverifycode" th:if="${map!=null}"  th:data="${map.user.userId}" class="pinkbtn button pink bigrounded fr">获取验证码</a>
                        <div class="overflow pr15 pl15">
                            <input id="verifycode" class="ft15 c969696  w100" placeholder="请输入验证码" type="text">
                        </div>
                    </div>
                </li>

                <li>
                    <div><a href="#" th:if="${map!=null}"  th:data="${map.userNo}" id="sure" class="submit mt40 button red bigrounded">确定</a></div>
                </li>
            </ul>

        </div>

    </div>
</div>

</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script type="application/javascript">
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");
    $("#getverifycode").on('click',function () {
        var phone=$('.phone').html();
        // $('#verifycode').val("6606");
        $.ajax({
            async:false,
            dataType: 'json',
            contentType: 'application/json',
            url:'/wap/sendCodeByPhone?phone='+phone+"&type=2",
            success:function (result) {
                var  data=$.parseJSON(result.json);
                //alert(data.message);
                if(data.stat==100){
                    getCodeTimer();
                }else {
                    // $('.code-msg').html("发送错误!");
                    $.toast("发送错误", "cancel");
                }
            }
        });
    // $.ajax({
    //         url: '/API/user/SendCodeChangeUserNo?userId='+$(this).attr('data'),
    //         type: 'post',
    //         dataType: 'json',
    //         contentType: 'application/json',
    //         async: false,
    //         success: function(data){
    //             if(data.stat==100)
    //             {
    //                 alert("验证码发送成功!")
    //             }
    //             else {
    //                 alert(data.message);
    //             }
    //         },
    //         beforeSend : function(xhr) {
    //             xhr.setRequestHeader(header, token);
    //         }
    //     });
    })
    $("#sure").on('click',function () {
        var code=$('#verifycode').val();
        if($.trim(code)==""){
            $.toast("请输入验证码", "cancel");
            return;
        }else {
            $.ajax({
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                url: '/wap/checkCode?code='+code+"&type=2",
                success: function (result) {
                    if(result.data>0){//999016
                        window.location="/wap/openUserCenter";
                    }else {
                        $.toast("验证码有误", "cancel");
                    }
                }
            })
        }

    })

    // 验证码倒计时
    function getCodeTimer () {
        var leftTime = 59;
        $('#getverifycode').removeClass('code');
        // clearClick();
        // if (leftTime && leftTime > 0) {
        var codeTimer = setInterval(function () {
            leftTime--;
            // sessionStorage.setItem('timing', leftTime);
            $('#getverifycode').text(leftTime+'秒后重新获取').addClass('codeDisabled');
            if (leftTime == 0) {
                clearInterval(codeTimer);
                $('#getverifycode').text('重新获取').removeClass('codeDisabled');
                $('#getverifycode').addClass('code');
            }
        }, 1000);
        // }
    }
    </script>
</html>